import React, { Component, PropTypes } from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import PxToDp from '../../utils/PxToDp';
import Base from '../../utils/Base';

const { width } = Base.window;

/* global uplineInterval */
global.uplineInterval = null;

/* global resetInterval */
global.resetInterval = () => {
  if (uplineInterval) {
    clearInterval(uplineInterval);
    uplineInterval = null;
  }
};

/* global doUplineInterval */
global.doUplineInterval = (type, dispatch) => {
  resetInterval();
  console.log(dispatch);
  // const inArray = ['Home', 'Datas', 'Mys'];
};

class TabBar extends Component {
  static propType = {
    goToPage: PropTypes.func,
    activeTab: PropTypes.number,
    tabs: PropTypes.array,
    tabNames: PropTypes.array,
    tabIcons: PropTypes.array,
  };

  _navigatorHandle(i) {
    const { tabs, dispatch } = this.props;
    doUplineInterval(tabs[i], dispatch);
    this.props.goToPage(i);
  }
  render() {
    return (
      <View style={style.wrapper}>
        {this.props.tabs.map((tab, i) => {
          const color = this.props.activeTab === i ? 'red' : 'gray';
          const icon = this.props.activeTab === i ?
                       this.props.selectedTabIcons[i] :
                       this.props.tabIcons[i];
          return (
            <TouchableOpacity
              key={this.props.tabNames[i]}
              activeOpacity={0.8}
              style={style.tab}
              onPress={() => this._navigatorHandle(i)}
            >
              <View>
                <Image
                  style={style.icon}
                  source={icon}
                />
                <Text style={{ color, fontSize: PxToDp(12) }}>{this.props.tabNames[i]}</Text>
              </View>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    width,
    height: PxToDp(50),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderTopWidth: Base.window.onePR,
  },
  tab: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  icon: {
    width: PxToDp(24),
    height: PxToDp(24),
    marginBottom: PxToDp(3),
  },
});

export default TabBar;
